<template>
	<view class="radio-item" :class="{'radio-active': active}" @click="onClick">
		<view class="radio-dot"></view>
		<view class="radio-content">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "RadioView",
		props: {
			active: Boolean
		},
		data() {
			return {

			};
		},
		methods: {
			onClick() {
				this.$emit('click')
			}
		}
	}
</script>

<style scoped lang="scss">
	.radio-item {
		@extend .row;

		.radio-dot {
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			background: #F1E6DF;
			@extend .column;
			margin-right: 16upx;

			&:before {
				content: "";
				width: 14rpx;
				height: 14rpx;

				border-radius: 50%;
			}
		}



		.radio-content {
			flex: 1;
			font-size: 29rpx;
			font-weight: 400;
			color: #B8ACA3;
		}
	}

	.radio-active {

		.radio-dot {
			background: #FF2615;
			&:before {
				background: #FFFFFF;
			}

		}

		.radio-content {
			color: #2C1101;
		}
	}
</style>